<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../dist/css/bootstrap.min.css">
  <title>基础导航栏-响应式</title>
  <style>
nav a:hover {
  background: #0d6efd; /* primary */
}
nav ul li:not(:last-child) a {
  border-bottom: 1px solid #6c757d;
}
@media (min-width: 768px) { /*md*/
  nav a {
    border-bottom: none !important;
  }
}
  </style>
</head>
<body>
  <nav class="bg-dark">
    <ul class="container d-flex flex-column list-unstyled text-center flex-md-row">
      <li><a href="javascript:void(0);" class="d-block p-3 text-decoration-none text-white">首页</a></li>
      <li><a href="javascript:void(0);" class="d-block p-3 text-decoration-none text-white">图书</a></li>
      <li><a href="javascript:void(0);" class="d-block p-3 text-decoration-none text-white">资源</a></li>
      <li><a href="javascript:void(0);" class="d-block p-3 text-decoration-none text-white">联系我们</a></li>
      <li class="ms-md-auto"><a href="javascript:void(0);" class="d-block p-3 text-decoration-none text-white">登录/注册</a></li>
    </ul>
  </nav>
</body>
</html>